<template>
  <div class="title">地震频次分布</div>
  <div class="chartbox" ref="chartRef"> </div>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { inject } from 'vue'

const getData = (e) => {
  initChart(e)
}
// 主动暴露childMethod方法
defineExpose({ getData })

const chartRef = ref(null)
let myChart = null
// 初始化图表
const initChart = (data) => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)

    var datas = []
    for (const item of data) {
      datas.push({ name: item.magnitudeRange, value: item.totalCount })
    }

    var option = {
      color: ['#30d0bf', '#30adf4', '#d29c25'],
      tooltip: {
        //提示框
        trigger: 'item',
        triggerOn: 'mousemove',
        borderWidth: 0.5,
        textStyle: {
          fontSize: 14
        }
      },
      legend: {
        top: '5%',
        left: '5%',
        icon: 'circle',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          type: 'pie',
          center:['50%','50%'],
          radius: ['60%', '42%'],
          label: {
            normal: {
              formatter: '{b}\n{c}',
              color: '#fff'
            },
            textStyle: {
              color: '#fff'
            }
          },
          labelLine: {
            showAbove: true,
            normal: {
              length: 15,
              length2: 50,
              showAbove: true,
              lineStyle: {
                type: 'solid'
              }
            }
          },
          data: datas
        }
      ]
    }
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
    // 指定图表的配置项和数据
  }
}

// 组件挂载后初始化图表
onMounted(() => {})

// 组件卸载时销毁图表实例，避免内存泄漏
onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
  }
})
</script>  
  
<style scoped>
.title {
  height: 41px;
  color: #fff;
  line-height: 41px;
  font-size: 18px;
  padding-left: 26px;
  font-weight: bold;
}
.chartbox {
  height: calc(100% - 41px);
}
</style>